<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>航班信息</title>

    <link  href="../static/bootstrap-3.3.7/css/bootstrap.min.css" th:href="@{bootstrap-3.3.7/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" media="all" href="../static/css/tyle.css" th:href="@{css/tyle.css}">
    <script src="../static/bootstrap-3.3.7/js/jquery-1.11.3.min.js" th:src="@{bootstrap-3.3.7/js/jquery-1.11.3.min.js}"  type="text/javascript"></script>
    <script src="../static/bootstrap-3.3.7/js/bootstrap.min.js" th:src="@{bootstrap-3.3.7/js/bootstrap.min.js}" type="text/javascript"></script>
    <script src="../static/My97DatePicker/WdatePicker.js" th:src="@{My97DatePicker/WdatePicker.js}" type="text/javascript" ></script>
</head>

    <style type="text/css">
        body{
            background-color: #f1f2f6;

        }

        .foot{
            position:relative;
            bottom:0;
            height: 100px;
            margin-top: 50px;
            padding-top: 30px;
            width: 100%;
            text-align:center;
            background-color: white;
            font-size: 12px;
        }

        .mytable{
            font-size:10px;
            width:750px;
            height:10px;
        }
        .bg{
            background-color: #f1f2f6;
        }
        .mytable span{
            color:red;
            font-size:13px;
        }

        #bar{
            background-color: white;
            position: fixed;z-index: 10;
            width: 100%;
            top: 0px;
            box-shadow: 0px 20px 20px -20px #a5b1c2;


        }



    </style>

<body>
<!--  	描述：导航条    -->
<nav class="navbar navbar-default" role="navigation" style="background-color: white; height: 80px;margin-bottom: 0px">
    <div class="container">
        <div class="row">
            <div class="navbar-header">
                <a class="navbar-brand" href="">
                    <i style="display: inline-block;background-color: #5cb85c; width: 150px;height:50px;
                        background: url(../static/img/bg/piaodekuai.png) no-repeat center; background-size: 100px 50px; "></i>
                    <!-- <span style="color:#0652DD; font-size:30px;width: 30px;">飘得快</span>-->
                </a>
            </div>

          <!--  <div class="nav navbar-nav navbar-right" style="padding-top: 25px; margin-right: 0px">
                <a href="#">
                    <span class="fcolor glyphicon glyphicon-user" style="color: #6A6AFF;font-size: 20px"></span>
                    <span style="color: #1e272e;font-size: 15px" >登录</span>
                </a>
                &nbsp;&nbsp;
                <a href="#">
                    <span class="fcolor glyphicon glyphicon-pencil" style="color: #6A6AFF;font-size: 20px"></span>
                    <span style="color: #1e272e;font-size: 15px" >注册</span>
                </a>
            </div>-->

            <div class="nav navbar-nav navbar-right" style="padding-top: 25px; margin-right: 0px;">
                <a href="/customerCenter">
                    <span class="glyphicon glyphicon-home" style="font-size: 13px;"></span>
                    <span style="font-size: 13px" >我的中心</span>
                </a>
                &nbsp;&nbsp;
              <!--  <a href="/customerCenter">
                    <span class="glyphicon glyphicon-envelope" style="font-size: 13px"></span>
                    <span style="font-size: 13px" >消息</span>
                </a>
                &nbsp;&nbsp;
                <a href="/customerCenter">
                    <span class="glyphicon glyphicon-shopping-cart" style="font-size: 13px"></span>
                    <span style="font-size: 13px" >我的订单</span>
                </a>-->
               &emsp;&emsp;&emsp;
                <a href="/customerCenter">
                    <span class="fcolor glyphicon glyphicon-user" style="color: #6A6AFF;font-size: 20px"></span>
                    <span style="color: #1e272e;font-size: 15px" >你好,李白</span>
                </a>
            </div>

        </div>
    </div>
</nav>

<div id="myDivId">

    <div class="container" style="margin-bottom: 3px; padding-top:5px; height: 23px; background-color: #ffffff">
        <span style="margin-right: 15px">单程</span>
        <span>北京</span>
        <span class="glyphicon glyphicon-arrow-right"></span>
        <span style="margin-right: 15px">上海</span>
        <span>2019-12-30 周一</span>
    </div>

    <div class="container" style="padding-top:5px; height: 50px; background-color: #ffffff">
        <form class="form-inline" role="form">
            <div class="form-group col-md-1" style="padding-left: 0px">
                <div class="form-group">
                    <select class="form-control" style="width: 78px">
                        <option>单程</option>
                        <option>往返</option>
                    </select>
                </div>
            </div>
            <div class="form-group col-md-5">
                <div class="form-group">
                    <input type="text" class="form-control" id="place" autocomplete="off" placeholder="中文 | 城市">
                </div>
                <div class="form-group">
                   <!-- <a class="glyphicon glyphicon-retweet" id="swap" style="color: #6A6AFF; text-decoration: none" href="javascript:;"></a>-->
                    <a class="" id="swap" style="color: #6A6AFF; text-decoration: none" href="javascript:;"><span>换</span></a>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="destination" autocomplete="off" placeholder="中文 | 城市">
                </div>
            </div>
            <div class="form-group col-md-5">
                <div class="form-group">
                        <input type="text" class="form-control Wdate" id="fd" autocomplete="off" placeholder="YYYY-MM-DD" style="height: 30px;"
                               onclick="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd',minDate:'%y-%M-%d',maxDate:'%y-%M-{%d+35}'})">
                </div>
                &nbsp;&nbsp;&nbsp;
                <div class="form-group">
                    <input type="text" class="form-control Wdate" id="bd" autocomplete="off" placeholder="返程时间" style="height: 30px;"
                           onclick="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd',minDate:'%y-%M-%d',maxDate:'%y-%M-{%d+35}'})">
                </div>
            </div>
            <div class="form-group col-md-1">
                <button type="submit" id="search2" class="btn btn-default" style="background-color: #00a8ff; color: white">重新搜索</button>
            </div>
        </form>
    </div>



    <div class="container" style="margin-top:5px; margin-bottom: 10px; padding-top:5px; height: 30px; background-color: #ffffff">
        <span class="col-md-2">航班信息</span>
        <span class="col-md-2">起飞时间</span>
        <span class="col-md-1"></span>
        <span class="col-md-2">到达时间</span>
        <span class="col-md-1">准点率</span>
        <span class="col-md-1" style="text-align: center">余票</span>
        <span class="col-md-2" style="text-align: center">价格</span>
    </div>
</div>

<div id="mybody">
    <!--row 1 -->
    <div class="container" style="background-color: #ffffff; margin-top: 5px;">
        <div class="row" >
            <div class="col-md-2" style="padding-top: 15px">
                <div>
                    <strong>
                        <img src="../static/img/flight_logo/MU.png" th:src="@{img/flight_logo/MU.png}"  alt="图片损坏"/>
                        东方航空
                    </strong>
                    <span style="color: rgba(0,0,0,0.8);font-size: 13px;">MU5534</span>
                </div>
                <div>
                    <div>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="info_table2" style="color: rgba(0,0,0,0.5)">空客320(中型)</span>
                    </div>
                    <div style="height: 10px;width: 10px;position: relative; z-index: 10">
                        <table class="table" style="font-size:12px;background-color: white;border: 1px solid #b2bec3">
                            <!--<tr class="active" style="height: 80px">
                                <td>
                                    <div style="width: 100px;padding-left:15px;padding-top: 15px">
                                        <span>机型</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span>空客320</span><br>
                                        <span>类型</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span>中型机</span><br>
                                        <span>餐食</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span>无</span>
                                    </div>
                                </td>
                                <td>
                                    <div style="width: 300px; padding-left:18px;padding-top: 15px">
                                        <span>出发准点率</span>&nbsp;&nbsp;
                                        <span>87%</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span>平均延误3分钟</span>
                                        <br>
                                        <span>到达准点率</span>&nbsp;&nbsp;
                                        <span>97%</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span>平均提前5分钟</span>
                                    </div>
                                </td>
                            </tr>
                            <tr style="height: 80px">
                                <td>
                                    <div style="padding-left:25px;padding-top: 15px">
                                        <span>经济舱</span>
                                    </div>
                                </td>
                                <td>
                                    <div style="width: 200px; padding-left:25px;padding-top: 15px">
                                        <span>座位间距:</span>&nbsp;&nbsp;
                                        <span>80cm</span>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span>天花板TV</span><br>
                                        <span>座位宽度:</span>&nbsp;&nbsp;
                                        <span>46cm</span><br>
                                        <span>可倾斜度:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span>100°</span>
                                    </div>
                                </td>
                            </tr>
                            <tr style="height: 80px">
                                <td>
                                    <div style="padding-left:25px;padding-top: 15px">
                                        <span>公务舱</span>
                                    </div>
                                </td>
                                <td>
                                    <div style="width: 200px; padding-left:25px;padding-top: 15px">
                                        <span>座位间距:</span>&nbsp;&nbsp;
                                        <span>91cm</span>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span>天花板TV</span><br>
                                        <span>座位宽度:</span>&nbsp;&nbsp;
                                        <span>52cm</span>
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span>插座</span><br>
                                        <span>可倾斜度:</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span>120°</span>
                                    </div>
                                </td>
                            </tr>-->
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-5" style="padding-top: 15px; display: flex;">
                <div >
                    <div>
                        <strong style="font-size: 25px;">07:30</strong>
                    </div>
                    <div>
                        <span style="color: rgba(0,0,0,0.6);font-size: 12px;">首都国际机场T2</span>
                    </div>
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <div style="padding-top: 20px;">
                    <i style="width:180px;background-image: url(../static/img/flight_arrow.png);display:inline-block;background-repeat:no-repeat;">&nbsp;</i>
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <div>
                    <div>
                        <strong style="font-size: 25px;">09:15</strong>
                    </div>
                    <div>
                        <span style="color: rgba(0,0,0,0.6);font-size: 12px;">浦东国际机场T1</span>
                    </div>
                </div>
            </div>
            <div class="col-md-1" style="padding-top: 25px">
                <div>
                    <span>97%</span>
                </div>
            </div>
            <div class="col-md-1" style="text-align:center;padding-top: 20px">
                <div>
                    <span style="font-size: 20px;color:#e74c3c;">可购</span>
                </div>
            </div>
            <div class="col-md-2" style="padding-top: 15px;text-align: center">
                <div>
                    <span style="font-size: 28px;color:#e74c3c;">¥550</span>
                    <span>起</span>
                </div>
                <div>
                    <span style="color: rgba(0,0,0,0.6);font-size: 12px;">经济舱4.2折</span>
                </div>
            </div>
            <div class="col-md-1" style="padding-top: 30px;padding-right: 15px;padding-left: 5px;">
                <input type="button" class="btn btn-success myClass"  value="预定" />
            </div>
        </div>
        <div class="row" >
            <table class="table"  width="100%" style="background-color: #ffffff;">

                <!--<tr>
                    <td width="20%">
                        <div>
                            &nbsp;&nbsp;&nbsp;
                            <strong>
                                <img src="../static/img/flight_logo/MU.png" th:src="@{img/flight_logo/MU.png}"  alt="图片损坏"/>
                                东方航空
                            </strong>
                        </div>
                    </td>
                    <td width="30%">
                        <div style="padding-top: 10px">
                            <span class="info" style="color: rgba(0,0,0,0.6);border-bottom:1px dashed #7f8fa6;text-decoration:none;">退改¥212起|托运行李额20KG|行程单</span>
                        </div>
                        <div style="height: 10px;width: 10px;position: absolute;">
                            <table class="table table-bordered mytable">
                                 &lt;!&ndash;<tr>
                                     <td rowspan="4" style="margin: 0px; padding:0px;">
                                         <table class="table table-bordered" style="width: 100%;height: 100%;border:0px">
                                             <tr>
                                                 <td class="bg" rowspan="4" style="vertical-align:middle;width: 30px" >成人票</td>
                                                 <td colspan="3" height="35px"></td>
                                             </tr>
                                             <tr>
                                                 <td colspan="3">产品退订费</td>
                                             </tr>
                                             <tr>
                                                 <td colspan="3">产品更改费</td>
                                             </tr>
                                             <tr>
                                                 <td colspan="3">签转条件</td>
                                             </tr>
                                         </table>
                                     </td>
                                     <td class="bg">2019年10月14日17:30前</td>
                                     <td class="bg">2019年10月15日17:30前</td>
                                     <td class="bg">2019年10月16日17:30前</td>
                                     <td class="bg">2019年10月17日17:30前</td>
                                 </tr>
                                <tr>
                                    <td>￥<span>65</span>/人</td>
                                    <td>￥<span>65</span>/人</td>
                                    <td>￥<span>65</span>/人</td>
                                    <td>￥<span>65</span>/人</td>
                                </tr>
                                <tr>
                                    <td><span>免费</span></td>
                                    <td>￥<span>65</span>/人</td>
                                    <td>￥<span>65</span>/人</td>
                                    <td>￥<span>65</span>/人</td>
                                </tr>
                                <tr>
                                    <td colspan="4">可以转签</td>
                                </tr>
                                <tr>
                                    <td rowspan="2">行李额</td>
                                    <td colspan="4">免费托运：20KG,单件体积不超过100*60*40CM</td>
                                </tr>
                                <tr>
                                    <td colspan="4">免费手提行李额: 5KG,单件体积不超过55*40*20CM</td>
                                </tr>
                                <tr>
                                    <td>报销凭证</td>
                                    <td colspan="4">可提供全额行程单。</td>
                                </tr>&ndash;&gt;

                            </table>
                        </div>
                    </td>
                    <td width="15%">
                        <div style="padding-top: 10px">
                            <span style="color: rgba(0,0,0,0.6)">经济舱4.2折</span>
                        </div>
                    </td>
                    <td width="15%">
                        <div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span>剩余:</span>
                            <span style="font-size: 28px;color:#e74c3c;">10</span>
                            <span>张</span>
                        </div>
                    </td>
                    <td width="15%">
                        <div>
                            &nbsp;&nbsp;
                            <span style="font-size: 28px;color:#e74c3c;">¥550</span>
                            <span>起</span>
                        </div>
                    </td>
                    <td width="5%">
                        <div>
                            <input type="button" class="btn btn-success" id="" value="预定" />
                        </div>
                    </td>
                </tr>
                 <tr>
                     <td width="20%">
                         <div>
                             &nbsp;&nbsp;&nbsp;
                             <strong>
                                 <img src="../static/img/flight_logo/MU.png" th:src="@{img/flight_logo/MU.png}"  alt="图片损坏"/>
                                 东方航空
                             </strong>
                         </div>
                     </td>
                     <td width="15%">
                         <div style="padding-top: 10px">
                             <span class="info" style="color: rgba(0,0,0,0.6);border-bottom:1px dashed #7f8fa6;text-decoration:none;">退改¥280起|托运行李额30KG|行程单</span>
                         </div>
                         <div style="height: 1px;width: 1px;position: absolute;">
                             <table class="table table-bordered mytable" ></table>
                         </div>
                     </td>
                     <td width="15%">
                         <div style="padding-top: 10px">
                             <span style="color: rgba(0,0,0,0.6)">公务舱4.6折</span>
                         </div>
                     </td>
                     <td width="15%">
                         <div>
                             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                             <span>剩余:</span>
                             <span style="font-size: 28px;color:#e74c3c;">5</span>
                             <span>张</span>
                         </div>
                    </td>
                     <td width="15%">
                         <div>
                             &nbsp;&nbsp;
                             <span style="font-size: 28px;color:#e74c3c;">¥700</span>
                             <span>起</span>
                         </div>
                     </td>
                     <td width="5%">
                         <div>
                             <input type="button" class="btn btn-success"  value="预定" />
                         </div>
                     </td>
                 </tr>-->
                <!---->
            </table>
        </div>
    </div>


    <!--row 2 -->
    <div class="container" style="background-color: #ffffff; margin-top: 5px; ">
        <div class="row" >
            <div class="col-md-2" style="padding-top: 15px">
                <div>
                    <strong>
                        <img src="../static/img/flight_logo/MU.png" th:src="@{img/flight_logo/MU.png}"  alt="图片损坏"/>
                        东方航空
                    </strong>
                    <span style="color: rgba(0,0,0,0.8);font-size: 13px;">MU5534</span>
                </div>
                <div>
                    <div>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="info_table2" style="color: rgba(0,0,0,0.5)">空客320(中型)</span>
                    </div>
                    <div style="height: 10px;width: 10px;position: relative; z-index: 10">
                        <table class="table" style="font-size:12px;background-color: white;border: 1px solid #b2bec3"></table>
                    </div>
                </div>
            </div>
            <div class="col-md-5" style="padding-top: 15px; display: flex;">
                <div >
                    <div>
                        <strong style="font-size: 25px;">07:30</strong>
                    </div>
                    <div>
                        <span style="color: rgba(0,0,0,0.6);font-size: 12px;">首都国际机场T2</span>
                    </div>
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <div style="padding-top: 20px;">
                    <i style="width:180px;background-image: url(../static/img/flight_arrow.png);display:inline-block;background-repeat:no-repeat;">&nbsp;</i>
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <div>
                    <div>
                        <strong style="font-size: 25px;">09:15</strong>
                    </div>
                    <div>
                        <span style="color: rgba(0,0,0,0.6);font-size: 12px;">浦东国际机场T1</span>
                    </div>
                </div>
            </div>
            <div class="col-md-1" style="padding-top: 25px">
                <div>
                    <span>97%</span>
                </div>
            </div>
            <div class="col-md-1" style="text-align:center;padding-top: 20px">
                <div>
                    <span style="font-size: 20px;color:#e74c3c;">可购</span>
                </div>
            </div>
            <div class="col-md-2" style="padding-top: 15px;text-align: center">
                <div>
                    <span style="font-size: 28px;color:#e74c3c;">¥550</span>
                    <span>起</span>
                </div>
                <div>
                    <span style="color: rgba(0,0,0,0.6);font-size: 12px;">经济舱4.2折</span>
                </div>
            </div>
            <div class="col-md-1" style="padding-top: 30px;padding-right: 15px;padding-left: 5px;">
                <input type="button" class="btn btn-success myClass"  value="预定" />
            </div>
        </div>
        <div class="row" >
            <table class="table"  width="100%" style="background-color: #ffffff;"></table>
        </div>
    </div>

    <!--row 3 -->
    <div class="container" style="background-color: #ffffff; margin-top: 5px; ">
        <div class="row" >
            <div class="col-md-2" style="padding-top: 15px">
                <div>
                    <strong>
                        <img src="../static/img/flight_logo/MU.png" th:src="@{img/flight_logo/MU.png}"  alt="图片损坏"/>
                        东方航空
                    </strong>
                    <span style="color: rgba(0,0,0,0.8);font-size: 13px;">MU5534</span>
                </div>
                <div>
                    <div>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="info_table2" style="color: rgba(0,0,0,0.5)">空客320(中型)</span>
                    </div>
                    <div style="height: 10px;width: 10px;position: relative; z-index: 10">
                        <table class="table" style="font-size:12px;background-color: white;border: 1px solid #b2bec3"></table>
                    </div>
                </div>
            </div>
            <div class="col-md-5" style="padding-top: 15px; display: flex;">
                <div >
                    <div>
                        <strong style="font-size: 25px;">07:30</strong>
                    </div>
                    <div>
                        <span style="color: rgba(0,0,0,0.6);font-size: 12px;">首都国际机场T2</span>
                    </div>
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <div style="padding-top: 20px;">
                    <i style="width:180px;background-image: url(../static/img/flight_arrow.png);display:inline-block;background-repeat:no-repeat;">&nbsp;</i>
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <div>
                    <div>
                        <strong style="font-size: 25px;">09:15</strong>
                    </div>
                    <div>
                        <span style="color: rgba(0,0,0,0.6);font-size: 12px;">浦东国际机场T1</span>
                    </div>
                </div>
            </div>
            <div class="col-md-1" style="padding-top: 25px">
                <div>
                    <span>97%</span>
                </div>
            </div>
            <div class="col-md-1" style="text-align:center;padding-top: 20px">
                <div>
                    <span style="font-size: 20px;color:#e74c3c;">可购</span>
                </div>
            </div>
            <div class="col-md-2" style="padding-top: 15px;text-align: center">
                <div>
                    <span style="font-size: 28px;color:#e74c3c;">¥550</span>
                    <span>起</span>
                </div>
                <div>
                    <span style="color: rgba(0,0,0,0.6);font-size: 12px;">经济舱4.2折</span>
                </div>
            </div>
            <div class="col-md-1" style="padding-top: 30px;padding-right: 15px;padding-left: 5px;">
                <input type="button" class="btn btn-success myClass"  value="预定" />
            </div>
        </div>
        <div class="row" >
            <table class="table"  width="100%" style="background-color: #ffffff;"></table>
        </div>
    </div>

    <!--row 4 -->
    <div class="container" style="background-color: #ffffff; margin-top: 5px; ">
        <div class="row" >
            <div class="col-md-2" style="padding-top: 15px">
                <div>
                    <strong>
                        <img src="../static/img/flight_logo/MU.png" th:src="@{img/flight_logo/MU.png}"  alt="图片损坏"/>
                        东方航空
                    </strong>
                    <span style="color: rgba(0,0,0,0.8);font-size: 13px;">MU5534</span>
                </div>
                <div>
                    <div>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="info_table2" style="color: rgba(0,0,0,0.5)">空客320(中型)</span>
                    </div>
                    <div style="height: 10px;width: 10px;position: relative; z-index: 10">
                        <table class="table" style="font-size:12px;background-color: white;border: 1px solid #b2bec3"></table>
                    </div>
                </div>
            </div>
            <div class="col-md-5" style="padding-top: 15px; display: flex;">
                <div >
                    <div>
                        <strong style="font-size: 25px;">07:30</strong>
                    </div>
                    <div>
                        <span style="color: rgba(0,0,0,0.6);font-size: 12px;">首都国际机场T2</span>
                    </div>
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <div style="padding-top: 20px;">
                    <i style="width:180px;background-image: url(../static/img/flight_arrow.png);display:inline-block;background-repeat:no-repeat;">&nbsp;</i>
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <div>
                    <div>
                        <strong style="font-size: 25px;">09:15</strong>
                    </div>
                    <div>
                        <span style="color: rgba(0,0,0,0.6);font-size: 12px;">浦东国际机场T1</span>
                    </div>
                </div>
            </div>
            <div class="col-md-1" style="padding-top: 25px">
                <div>
                    <span>97%</span>
                </div>
            </div>
            <div class="col-md-1" style="text-align:center;padding-top: 20px">
                <div>
                    <span style="font-size: 20px;color:#e74c3c;">可购</span>
                </div>
            </div>
            <div class="col-md-2" style="padding-top: 15px;text-align: center">
                <div>
                    <span style="font-size: 28px;color:#e74c3c;">¥550</span>
                    <span>起</span>
                </div>
                <div>
                    <span style="color: rgba(0,0,0,0.6);font-size: 12px;">经济舱4.2折</span>
                </div>
            </div>
            <div class="col-md-1" style="padding-top: 30px;padding-right: 15px;padding-left: 5px;">
                <input type="button" class="btn btn-success myClass"  value="预定" />
            </div>
        </div>
        <div class="row" >
            <table class="table"  width="100%" style="background-color: #ffffff;"></table>
        </div>
    </div>

    <!--row 5 -->
    <div class="container" style="background-color: #ffffff; margin-top: 5px; ">
        <div class="row" >
            <div class="col-md-2" style="padding-top: 15px">
                <div>
                    <strong>
                        <img src="../static/img/flight_logo/MU.png" th:src="@{img/flight_logo/MU.png}"  alt="图片损坏"/>
                        东方航空
                    </strong>
                    <span style="color: rgba(0,0,0,0.8);font-size: 13px;">MU5534</span>
                </div>
                <div>
                    <div>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="info_table2" style="color: rgba(0,0,0,0.5)">空客320(中型)</span>
                    </div>
                    <div style="height: 10px;width: 10px;position: relative; z-index: 10">
                        <table class="table" style="font-size:12px;background-color: white;border: 1px solid #b2bec3"></table>
                    </div>
                </div>
            </div>
            <div class="col-md-5" style="padding-top: 15px; display: flex;">
                <div >
                    <div>
                        <strong style="font-size: 25px;">07:30</strong>
                    </div>
                    <div>
                        <span style="color: rgba(0,0,0,0.6);font-size: 12px;">首都国际机场T2</span>
                    </div>
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <div style="padding-top: 20px;">
                    <i style="width:180px;background-image: url(../static/img/flight_arrow.png);display:inline-block;background-repeat:no-repeat;">&nbsp;</i>
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <div>
                    <div>
                        <strong style="font-size: 25px;">09:15</strong>
                    </div>
                    <div>
                        <span style="color: rgba(0,0,0,0.6);font-size: 12px;">浦东国际机场T1</span>
                    </div>
                </div>
            </div>
            <div class="col-md-1" style="padding-top: 25px">
                <div>
                    <span>97%</span>
                </div>
            </div>
            <div class="col-md-1" style="text-align:center;padding-top: 20px">
                <div>
                    <span style="font-size: 20px;color:#e74c3c;">可购</span>
                </div>
            </div>
            <div class="col-md-2" style="padding-top: 15px;text-align: center">
                <div>
                    <span style="font-size: 28px;color:#e74c3c;">¥550</span>
                    <span>起</span>
                </div>
                <div>
                    <span style="color: rgba(0,0,0,0.6);font-size: 12px;">经济舱4.2折</span>
                </div>
            </div>
            <div class="col-md-1" style="padding-top: 30px;padding-right: 15px;padding-left: 5px;">
                <input type="button" class="btn btn-success myClass"  value="预定" />
            </div>
        </div>
        <div class="row" >
            <table class="table"  width="100%" style="background-color: #ffffff;"></table>
        </div>
    </div>


    <div class="container" style=" margin-top: 25px;font-size: 12px;padding-left: 0px;color: #7f8c8d">
        <div>
            <h5>航班信息免责声明:</h5>
            <p>飘得快网提供的各类航班相关的信息，包括但不限于舱位价格、餐食、起降准点率等，来源于中国航信、全国各大机场、航空公司及相关部门公布数据。
                由于这些信息可能随时变化，以及网络传输问题，携程提供的此类信息可能并非最新或存在误差，
                因此<b>仅供旅客作为一般参考</b>，任何公司或个人不能将此作为携程做出任何承诺或做出任何保证的依据。
            </p>
        </div>
        <div style="float: left">
            <span>国内机票查询</span> |
            <span>上海到西安2019-11-01</span>
        </div>
        <div style="float: right">
            <span style="float: right">数据信息由</span><br>
            <span>中国民航信息网络股份有限公司提供</span>
        </div>
    </div>

</div>


<div id="in_city" style="display: none"></div>
<div id="mesg" style="display: none;position:absolute; padding-left: 5px; padding-top: 2px; margin-top: 5px; border: 1px solid #7f8fa6">
    <!--<span class="glyphicon glyphicon-minus-sign" style="color: #e84118; font-size: 8px"></span>
    <span  style="font-size: 11px; color: #636e72">请选择出发城市</span>-->
</div>


<div class="foot">
    <p>网站导航 | 宾馆索引 | 用户协议 | 关于携程 | 企业公民 | 诚聘英才 | 分销联盟 | 企业礼品卡采购 | 代理合作 | 广告业务 | 联系我们 | 返回旧版</p>
    <span>Copyright © 2019-2019, 第九组 All rights reserved.</span>
</div>

</body>


<script type="text/javascript" src="../static/js/cityTemplate.js" th:src="@{js/cityTemplate.js}"></script>
<script type="text/javascript">


    var cityA = $(".city_a_le1 a"); //城市
    var pla = $("#place");  //出发地
    var dest = $("#destination");  //目的地
    // 默认值
    inCity.width = "345";  //城市选择框  宽
    inCity.height = "auto";  //城市选择框  高
    inCity.id = "#in_city";  //城市选择框  父级ID
    inCity.Children = '.city_a_le1';  //城市名box
    // 初始化 城市HTML模板
    $(inCity.id).prepend(inCity._template.join(''));
    inCity.Hot(cityA);

    //城市 导航
    var apay = $(".screen a");

    var placeThis; //当前选择标签
    var clickThis; //当前选择标签
    apay.click(function(obj){  //城市导航
        inCity.payment($(this));
    })

    inCity.place(pla); //出发地
    inCity.destination(dest);  //目的地
    inCity.cityClick(cityA); //显示赋值城市
    //inCity.explace();

    $('body').click(function(){
        $(inCity.id).hide();
    });



/*    var scrollFunc = function (e) {
        alert($("#mybody").position().top);
        var x = $("#mybody").offset().top;
        if(x == 0){
            alert("sss");
        }
    }*/

/*
    //给页面绑定滑轮滚动事件
    if(document.addEventListener) {
        document.addEventListener('DOMouseScroll', scrollFunc, false);
    }

    //滚动滑轮触发scrol1Func方法
    window.onmousewheel = document.onmousewhee1 = scrollFunc;
*/


/*    $(document).ready(function(){
        $('#mybody').scroll(function() {
            alert("134");
            var x = $("#mybody").offset().top;
            if(x == 0){
                alert("sss");
            }
        });
   });*/




    $(function(){

        $(window).scroll(function() {
            //alert($("#mybody").position().top);
            var s = $(window).scrollTop() || $('body').scrollTop();
            if(s>90){
                $('#myDivId').attr('id', 'bar');
            }else if(s < 80){
                //alert(s);
               $('#bar').attr('id', 'myDivId');
            }
        });




        //页面加载完毕之后,获取样式名称为myClass一批元素,为期绑定点击事件
        $(".myClass").click(function(){
            //获取当前订单id
            var id=this.id;
            //获取当前按钮文字
            var txt=this.value;
            //PS:获取到当前元素的下一个对象table
            var $tb=$(this).parent().parent().next().children();

            if(txt=="预定"){
                //清除内容
                $tb.html("");
                var th=" <tr>\n" +
                    "                   <td width=\"20%\">\n" +
                    "                       <div>\n" +
                    "                       </div>\n" +
                    "                   </td>\n" +
                    "                   <td width=\"30%\">\n" +
                    "                       <div style=\"padding-top: 10px\">\n" +
                    "                           <span class=\"info\" style=\"color: rgba(0,0,0,0.6);border-bottom:1px dashed #7f8fa6;text-decoration:none;\">退改¥212起|托运行李额20KG|行程单</span>\n" +
                    "                       </div>\n" +
                    "                       <div style=\"height: 10px;width: 10px;position: relative; z-index: 20\">\n" +
                    "                           <table class=\"table table-bordered mytable\">\n" +
                    "                           </table>\n" +
                    "                       </div>\n" +
                    "                   </td>\n" +
                    "                   <td width=\"15%\">\n" +
                    "                       <div style=\"padding-top: 10px; height: 30px\">\n" +
                    "                           <span style=\"color: rgba(0,0,0,0.6)\">经济舱4.2折</span>\n" +
                    "                       </div>\n" +
                    "                   </td>\n" +
                    "                   <td width=\"15%\">\n" +
                    "                       <div style='height:50px;'>\n" +
                    "                           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n" +
                    "                           <span>剩余:</span>\n" +
                    "                           <span style=\"font-size: 28px;color:#e74c3c;\">10</span>\n" +
                    "                           <span>张</span>\n" +
                    "                       </div>\n" +
                    "                   </td>\n" +
                    "                   <td width=\"15%\">\n" +
                    "                       <div style='height:50px;'>\n" +
                    "                           &nbsp;&nbsp;\n" +
                    "                           <span style=\"font-size: 28px;color:#e74c3c;\">¥730</span>\n" +
                    "                       </div>\n" +
                    "                   </td>\n" +
                    "                   <td width=\"5%\">\n" +
                    "                       <div style='padding-right: 20px'>\n" +
                    "                           <input type=\"button\" class=\"btn btn-success book\" id=\"\" value=\"预定\" />\n" +
                    "                       </div>\n" +
                    "                   </td>\n" +
                    "               </tr>\n" +
                    "                <tr>\n" +
                    "                    <td width=\"20%\">\n" +
                    "                        <div>\n" +
                    "                        </div>\n" +
                    "                    </td>\n" +
                    "                    <td width=\"15%\">\n" +
                    "                        <div style=\"padding-top: 10px\">\n" +
                    "                            <span class=\"info\" style=\"color: rgba(0,0,0,0.6);border-bottom:1px dashed #7f8fa6;text-decoration:none;\">退改¥280起|托运行李额30KG|行程单</span>\n" +
                    "                        </div>\n" +
                    "                        <div style=\"height: 1px;width: 1px;position: relative; z-index: 10\">\n" +
                    "                            <table class=\"table table-bordered mytable\" ></table>\n" +
                    "                        </div>\n" +
                    "                    </td>\n" +
                    "                    <td width=\"15%\">\n" +
                    "                        <div style=\"padding-top: 10px\">\n" +
                    "                            <span style=\"color: rgba(0,0,0,0.6)\">公务舱4.6折</span>\n" +
                    "                        </div>\n" +
                    "                    </td>\n" +
                    "                    <td width=\"15%\">\n" +
                    "                        <div>\n" +
                    "                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n" +
                    "                            <span>剩余:</span>\n" +
                    "                            <span style=\"font-size: 28px;color:#e74c3c;\">15</span>\n" +
                    "                            <span>张</span>\n" +
                    "                        </div>\n" +
                    "                   </td>\n" +
                    "                    <td width=\"15%\">\n" +
                    "                        <div>\n" +
                    "                            &nbsp;&nbsp;\n" +
                    "                            <span style=\"font-size: 28px;color:#e74c3c;\">¥1150</span>\n" +
                    "                        </div>\n" +
                    "                    </td>\n" +
                    "                    <td width=\"5%\" style='padding-right: 8px'>\n" +
                    "                        <div style='padding-right: 20px'>\n" +
                    "                            <input type=\"button\" class=\"btn btn-success book\"  value=\"预定\" />\n" +
                    "                        </div>\n" +
                    "                    </td>\n" +
                    "                </tr>";
                $tb.append(th);

                fun();



                //注意注意注意注意注意注意注意注意注意注意注意
                //注意注意注意注意注意注意
                $('.book').click(function () {
                    location.href="/passenger";
                });




                this.value="收起";
                $(this).toggleClass("btn-success");
                $(this).toggleClass("btn-warning");
                //this.removeClass("btn-success");
                //this.addClass("");
                //$(this).val("关闭");

                $(this).parent().prev().html("");
                $(this).parent().prev().prev().html("");

            }else{
                this.value="预定";
                $(this).toggleClass("btn-success");
                $(this).toggleClass("btn-warning");
                //清空表格内容
                $tb.html("");
                $(this).parent().prev().html("<div>\n" +
                    "                    <span style=\"font-size: 28px;color:#e74c3c;\">¥550</span>\n" +
                    "                    <span>起</span>\n" +
                    "                </div>\n" +
                    "                <div>\n" +
                    "                    <span style=\"color: rgba(0,0,0,0.6);font-size: 12px;\">经济舱4.2折</span>\n" +
                    "                </div>");
                $(this).parent().prev().prev().html(" <div>\n" +
                    "                    <span style=\"font-size: 20px;color:#e74c3c;\">可购</span>\n" +
                    "                </div>");

            }
        });


        var fun = function(){
            $(".info").hover(function(){
                //alert("来了");
                var $tb=$(this).parent().next().children();
                var th="<tr>\n" +
                    "                                    <td rowspan=\"4\" style=\"margin: 0px; padding:0px;\">\n" +
                    "                                        <table class=\"table table-bordered\" style=\"width: 100%;height: 100%;border:0px\">\n" +
                    "                                            <tr>\n" +
                    "                                                <td class=\"bg\" rowspan=\"4\" style=\"vertical-align:middle;width: 30px\" >成人票</td>\n" +
                    "                                                <td colspan=\"3\" height=\"35px\"></td>\n" +
                    "                                            </tr>\n" +
                    "                                            <tr>\n" +
                    "                                                <td colspan=\"3\">产品退订费</td>\n" +
                    "                                            </tr>\n" +
                    "                                            <tr>\n" +
                    "                                                <td colspan=\"3\">产品更改费</td>\n" +
                    "                                            </tr>\n" +
                    "                                            <tr>\n" +
                    "                                                <td colspan=\"3\">签转条件</td>\n" +
                    "                                            </tr>\n" +
                    "                                        </table>\n" +
                    "                                    </td>\n" +
                    "                                    <td class=\"bg\">2019年10月14日17:30前</td>\n" +
                    "                                    <td class=\"bg\">2019年10月15日17:30前</td>\n" +
                    "                                    <td class=\"bg\">2019年10月16日17:30前</td>\n" +
                    "                                    <td class=\"bg\">2019年10月17日17:30前</td>\n" +
                    "                                </tr>\n" +
                    "                               <tr>\n" +
                    "                                   <td>￥<span>65</span>/人</td>\n" +
                    "                                   <td>￥<span>65</span>/人</td>\n" +
                    "                                   <td>￥<span>65</span>/人</td>\n" +
                    "                                   <td>￥<span>65</span>/人</td>\n" +
                    "                               </tr>\n" +
                    "                               <tr>\n" +
                    "                                   <td><span>免费</span></td>\n" +
                    "                                   <td>￥<span>65</span>/人</td>\n" +
                    "                                   <td>￥<span>65</span>/人</td>\n" +
                    "                                   <td>￥<span>65</span>/人</td>\n" +
                    "                               </tr>\n" +
                    "                               <tr>\n" +
                    "                                   <td colspan=\"4\">可以转签</td>\n" +
                    "                               </tr>\n" +
                    "                               <tr>\n" +
                    "                                   <td rowspan=\"2\">行李额</td>\n" +
                    "                                   <td colspan=\"4\">免费托运：20KG,单件体积不超过100*60*40CM</td>\n" +
                    "                               </tr>\n" +
                    "                               <tr>\n" +
                    "                                   <td colspan=\"4\">免费手提行李额: 5KG,单件体积不超过55*40*20CM</td>\n" +
                    "                               </tr>\n" +
                    "                               <tr>\n" +
                    "                                   <td>报销凭证</td>\n" +
                    "                                   <td colspan=\"4\">可提供全额行程单。</td>\n" +
                    "                               </tr>";
                $tb.append(th);
            },function(){
                var $tb=$(this).parent().next().children();
                $tb.html("");
            });
        }

    });

    $(".info_table2").hover(function(){
        //alert("info_table2");
        var $tb=$(this).parent().next().children();
        var th="<tr class=\"active\" style=\"height: 80px\">\n" +
            "                                <td>\n" +
            "                                    <div style=\"width: 100px;padding-left:15px;padding-top: 15px\">\n" +
            "                                        <span>机型</span>&nbsp;&nbsp;&nbsp;&nbsp;\n" +
            "                                        <span>空客320</span><br>\n" +
            "                                        <span>类型</span>&nbsp;&nbsp;&nbsp;&nbsp;\n" +
            "                                        <span>中型机</span><br>\n" +
            "                                        <span>餐食</span>&nbsp;&nbsp;&nbsp;&nbsp;\n" +
            "                                        <span>无</span>\n" +
            "                                    </div>\n" +
            "                                </td>\n" +
            "                                <td>\n" +
            "                                    <div style=\"width: 300px; padding-left:18px;padding-top: 15px\">\n" +
            "                                        <span>出发准点率</span>&nbsp;&nbsp;\n" +
            "                                        <span>87%</span>&nbsp;&nbsp;&nbsp;&nbsp;\n" +
            "                                        <span>平均延误3分钟</span>\n" +
            "                                        <br>\n" +
            "                                        <span>到达准点率</span>&nbsp;&nbsp;\n" +
            "                                        <span>97%</span>&nbsp;&nbsp;&nbsp;&nbsp;\n" +
            "                                        <span>平均提前5分钟</span>\n" +
            "                                    </div>\n" +
            "                                </td>\n" +
            "                            </tr>\n" +
            "                            <tr style=\"height: 80px\">\n" +
            "                                <td>\n" +
            "                                    <div style=\"padding-left:25px;padding-top: 15px\">\n" +
            "                                        <span>经济舱</span>\n" +
            "                                    </div>\n" +
            "                                </td>\n" +
            "                                <td>\n" +
            "                                    <div style=\"width: 200px; padding-left:25px;padding-top: 15px\">\n" +
            "                                        <span>座位间距:</span>&nbsp;&nbsp;\n" +
            "                                        <span>80cm</span>\n" +
            "                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n" +
            "                                        <span>天花板TV</span><br>\n" +
            "                                        <span>座位宽度:</span>&nbsp;&nbsp;\n" +
            "                                        <span>46cm</span><br>\n" +
            "                                        <span>可倾斜度:</span>&nbsp;&nbsp;&nbsp;&nbsp;\n" +
            "                                        <span>100°</span>\n" +
            "                                    </div>\n" +
            "                                </td>\n" +
            "                            </tr>\n" +
            "                            <tr style=\"height: 80px\">\n" +
            "                                <td>\n" +
            "                                    <div style=\"padding-left:25px;padding-top: 15px\">\n" +
            "                                        <span>公务舱</span>\n" +
            "                                    </div>\n" +
            "                                </td>\n" +
            "                                <td>\n" +
            "                                    <div style=\"width: 200px; padding-left:25px;padding-top: 15px\">\n" +
            "                                        <span>座位间距:</span>&nbsp;&nbsp;\n" +
            "                                        <span>91cm</span>\n" +
            "                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n" +
            "                                        <span>天花板TV</span><br>\n" +
            "                                        <span>座位宽度:</span>&nbsp;&nbsp;\n" +
            "                                        <span>52cm</span>\n" +
            "                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n" +
            "                                        <span>插座</span><br>\n" +
            "                                        <span>可倾斜度:</span>&nbsp;&nbsp;&nbsp;&nbsp;\n" +
            "                                        <span>120°</span>\n" +
            "                                    </div>\n" +
            "                                </td>\n" +
            "                            </tr>";
        $tb.append(th);
    },function(){
        var $tb=$(this).parent().next().children();
        $tb.html("");
    });

    $("#swap").click(function () {
        if($("#place").val() != "" && $.trim($("#place").val()).length != 0 && $("#destination").val() != "" && $.trim($("#destination").val()).length != 0){
            var place = $("#place").val();
            var destination = $("#destination").val() ;
            $("#place").val(destination);
            $("#destination").val(place) ;
            return false;
        }else {
            return false;
        }
    });

    $("#search2").click(function(){

        var startTime=$("#fd").val();
        var start=new Date(startTime.replace("-", "/").replace("-", "/"));
        var endTime=$("#bd").val();
        var end=new Date(endTime.replace("-", "/").replace("-", "/"));


        if($("#place").val() == "" || $.trim($("#place").val()).length == 0){

            var x = $("#place").offset().top + 30 ;
            var y = $("#place").offset().left  ;
            //alert(x + " " + y);
            $("#mesg").css({"background-color":"#F8EFBA","top":x+"px","left":y+"px","width":130+"px","height":25+"px"});
            $("#mesg").html("<span class=\"glyphicon glyphicon-minus-sign\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                "    <span  style=\"font-size: 11px; color: #636e72\">请选择出发城市</span>");
            $("#mesg").show();

            return false;
        }else if($("#destination").val() == "" || $.trim($("#destination").val()).length == 0) {
            var x2 = $("#destination").offset().top + 30 ;
            var y2 = $("#destination").offset().left ;
            //alert(x + " " + y);
            $("#mesg").css({"background-color":"#F8EFBA","top":x2+"px","left":y2+"px","width":130+"px","height":25+"px"});
            $("#mesg").html("<span class=\"glyphicon glyphicon-minus-sign\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                "    <span  style=\"font-size: 11px; color: #636e72\">请选择到达城市</span>");
            $("#mesg").show();

            return false;
        }else if($("#destination").val() == $("#place").val()) {
            var x2 = $("#destination").offset().top + 30;
            var y2 = $("#destination").offset().left  ;
            //alert(x + " " + y);
            $("#mesg").css({"background-color":"#F8EFBA","top":x2+"px","left":y2+"px","width":180+"px","height":25+"px"});
            $("#mesg").html("<span class=\"glyphicon glyphicon-minus-sign\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                "    <span  style=\"font-size: 11px; color: #636e72\">出发城市和到达城市不能相同</span>");
            $("#mesg").show();

            return false;
        }else if(end < start) {
            $("#mesg").hide();
            //$("#bd").val();
            $("#fd").val($("#bd").val()) ;

            return false;

        }else if($("#fd").val() == "" || $.trim($("#fd").val()).length == 0) {
            //默认日期属性
            var now = new Date();
            //格式化日，如果小于9，前面补0
            var day = ("0" + now.getDate()).slice(-2);
            //格式化月，如果小于9，前面补0
            var month = ("0" + (now.getMonth() + 1)).slice(-2);
            //拼装完整日期格式
            var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
            //完成赋值
            // alert(today);
            $("#fd").val(today);
            $("#mesg").hide();
            return true;

        }else {
            document.form.action = "/oneway";
            document.form.submit();
            return true;
        }

    });

</script>
</html>